import "./index.less";
import { useEffect, useState } from "react";
import { Button, Drawer, message, Space } from "antd";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import moment from "moment";
import { schedulingList, synthesisList, synthesisUpdata } from "@/api/SecondmentDictionary";
import { useTranslation } from "react-i18next";
let work = "";
let shift = "";
let pageNo = 1;
let pageSize = 10;
const index = () => {
	const { t } = useTranslation();
	//排班列表
	const [schedulingDate, setSchedulingDate] = useState([]);
	//修改排班弹窗
	const [open, setOpen] = useState(false);
	//排班人员
	const [synthesis, setsSynthesis] = useState([]);
	//人员是否已经排班
	const [isShiftList, setsIsShiftList] = useState([]);
	const showDrawer = () => {
		setOpen(true);
	};

	const onClose = () => {
		setOpen(false);
	};
	const onOkClick = async () => {
		const res = await getFieldsValue();
		const staffList = res.staffList;
		if (staffList) {
			await synthesisUpdata({ workDate: work, shiftTypeId: shift, staffList });
			getschedulingList();
			onClose();
			message.success(t("kevin_ui.Added successfully"));
		} else {
			message.error("排班人员不能为空");
		}
	};
	const getschedulingList = async () => {
		let datePicker = "";
		if (work) {
			datePicker = work;
		} else {
			const now = new Date();
			const year = now.getFullYear();
			const month = now.getMonth() + 1;
			const day = now.getDate();
			datePicker = year + "-" + month + "-" + day;
		}
		const res = await schedulingList(datePicker);
		setSchedulingDate(res);
	};
	const weekFn = (week: any, staff: any) => async () => {
		work = week.date;
		shift = staff.shiftTypeId;
		const res = await synthesisList({ pageNo, pageSize, workDate: week.date, shiftTypeId: staff.shiftTypeId });
		setsSynthesis(res.list.map((item: any) => ({ label: item.staffName, value: item.staffId })));
		setsIsShiftList(
			res.list.map((item: any) => {
				if (item.isShift) {
					return item.staffId;
				} else {
					return "";
				}
			})
		);

		showDrawer();
	};

	useEffect(() => {
		getschedulingList();
	}, []);

	const searchFormSchema: FormSchema[] = [
		{
			label: "排班日期",
			field: "workDate",
			component: "DatePicker",
			colProps: { span: 24 },
			componentProps: {
				defaultPickerValue: moment("2015-01-01", "YYYY-MM-DD"),
				disabled: true
			}
		},
		{
			label: "排班时间",
			field: "shiftTypeId",
			component: "Select",
			componentProps: {
				defaultValue: shift,
				disabled: true,
				options: [
					{ label: "早班：8：00：00——12：00：00", value: "1" },
					{ label: "中班：13：00：00——18：00：00", value: "2" },
					{ label: "晚班：19：00：00——22：00：00", value: "3" }
				]
			},
			colProps: { span: 24 }
		},
		{
			label: "排班人员",
			field: "staffList",
			component: "CheckboxGroup",
			componentProps: {
				defaultValue: isShiftList,
				options: synthesis
			},
			colProps: { span: 24 }
		}
	];
	const [registerForm, { getFieldsValue }] = useForm({
		labelWidth: 120,
		schemas: searchFormSchema,
		autoSubmitOnEnter: false,
		showActionButtonGroup: false
	});
	const schedulingFn = () => {
		return (
			<ul className="scheduling">
				<li>
					<ul className="col">
						<li></li>
						<li></li>
						<li>周一</li>
						<li>周二</li>
						<li>周三</li>
						<li>周四</li>
						<li>周五</li>
						<li>周六</li>
						<li>周日</li>
					</ul>
				</li>
				<li>
					{schedulingDate.map((item: any) => {
						return (
							<ul className="column" key={item.specId}>
								<li>
									<ul style={{ display: "flex" }}>
										<li className="specName">{item.specName}</li>
										<li>
											{item.typeList.map((type: any) => {
												return (
													<p key={type.shiftTypeId} className="time">
														{type.shiftName}：{type.startTime}——{type.endTime}
													</p>
												);
											})}
										</li>
										{item.weekDays.map((week: any) => {
											return (
												<li key={week.week}>
													{week.shiftTypes.map((shift: any) => {
														return (
															<>
																<p key={shift.spceId} onClick={weekFn(week, shift)}>
																	{shift.staffList.map((staff: any) => {
																		return (
																			<>
																				<span key={staff.staffId}>{staff.staffName ? staff.staffName : ""}</span>
																				<br />
																			</>
																		);
																	})}
																</p>
															</>
														);
													})}
												</li>
											);
										})}
									</ul>
								</li>
							</ul>
						);
					})}
				</li>
			</ul>
		);
	};
	return (
		<div>
			{schedulingFn()}
			<Drawer
				title="修改排班"
				placement="right"
				onClose={onClose}
				open={open}
				size="large"
				extra={
					<Space>
						<Button onClick={onClose}>Cancel</Button>
						<Button type="primary" onClick={onOkClick}>
							OK
						</Button>
					</Space>
				}
			>
				<BasicForm register={registerForm}></BasicForm>
			</Drawer>
		</div>
	);
};
export default index;
